<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 简历整体 -->
    <div class="container">
        <!-- 左半部分 -->
        <div class="profile">
            <!-- 个人头像 -->
            <img class="avatar"
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F3a2f9e13-ac28-467f-8ccc-e024f5e81c0a%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1696241204&t=0d7957ff46da0c2a2dddea56ed107267"
                alt="个人头像">
            <!-- 姓名 -->
            <h3>肖旭瑞</h3>
            <!-- 意向岗位 -->
            <p>前端开发、信息系统工程监理</p>
            <!-- 下载简历 与 发送面试邀请 -->
            <div class="buttons">
                <a class="btn" href="javascript:alert('已下载')">下载简历</a>
                <a class="btn" href="javascript:alert('发送成功')">发送面试邀请</a>
            </div>
        </div>
        <!-- 右半部分 -->
        <div class="information">
            <!-- About Me（个人信息） -->
            <div class="about">
                <h3 class="title">个人信息</h3>
                <p>我叫肖旭瑞，可以叫我旭瑞，擅长的技能有：Python，精通爬虫，可视化，数据分析，人工智能等领域。</p>
                <p>不仅如此，我还能熟练使用前端语言独立制作电商网站，招牌网站等等，这个简历也是我用HTML、CSS和JS完成的喔。</p>
                <div class="box-container">
                    <div class="box">
                        <h3><span>年龄：</span>23</h3>
                        <h3><span>地址：</span>重庆，江津</h3>
                        <h3><span>电话：</span>130-4847-9668（微信同号）</h3>
                        <h3><span>邮箱：</span>1397756229@qq.com</h3>
                    </div>
                    <div class="box">
                        <h3><span>求职：</span>Web前端开发</h3>
                        <h3><span>语言：</span>VUE,REACT</h3>
                        <h3><span>工龄：</span>1年</h3>
                        <h3><span>现状：</span>随时到岗</h3>
                    </div>
                </div>
            </div>
            <!-- My Services（我的服务） -->
            <div class="services">
                <h3 class="title">我的服务</h3>
                <div class="imgbox-container">
                    <div class="box">
                        <img src="http://nocturne.bczcdn.com/file/1645598211806_42022/icon-1.png" alt="HTML5">
                        <h3>HTML 5</h3>
                    </div>
                    <div class="box">
                        <img src="http://nocturne.bczcdn.com/file/1645598216656_89057/icon-2.png" alt="CSS3">
                        <h3>CSS 3</h3>
                    </div>
                    <div class="box">
                        <img src="http://nocturne.bczcdn.com/file/1645598219832_4197/icon-3.png" alt="JavaScript">
                        <h3>JavaScript</h3>
                    </div>
                    <div class="box">
                        <img src="http://nocturne.bczcdn.com/file/1645598223509_63268/icon-4.png" alt="Python">
                        <h3>Python</h3>
                    </div>
                    <div class="box">
                        <img src="http://nocturne.bczcdn.com/file/1645598226940_86454/icon-5.png" alt="MYSQL">
                        <h3>MYSQL</h3>
                    </div>
                    <!-- <div class="box">
                        <img src="http://nocturne.bczcdn.com/file/1645598230253_49248/icon-6.png" alt="">
                        <h3>C++</h3>
                    </div> -->
                </div>
            </div>
            <!-- My Skills（我的技能） -->
            <div class="skills">
                <h3 class="title">我的技能</h3>
                <div class="box-container">
                    <div class="box">
                        <div class="progress">
                            <h3>Html <span>90%</span></h3>
                            <div class="bar"><span class="first"></span></div>
                        </div>
                        <div class="progress">
                            <h3>Css <span>80%</span></h3>
                            <div class="bar"><span class="second"></span></div>
                        </div>
                        <div class="progress">
                            <h3>JavaScript <span>65%</span></h3>
                            <div class="bar"><span class="third"></span></div>
                        </div>

                    </div>
                    <div class="box">
                        <div class="progress">
                            <h3>Web Design <span>80%</span></h3>
                            <div class="bar"><span class="fifth"></span></div>
                        </div>
                        <div class="progress">
                            <h3>App Design <span>65%</span></h3>
                            <div class="bar"><span class="third"></span></div>
                        </div>
                        <div class="progress">
                            <h3>Python <span>65%</span></h3>
                            <div class="bar"><span class="fourth"></span></div>
                        </div>
                        <!-- <div class="progress">
                            <h3>Graphic Design <span>10%</span></h3>
                            <div class="bar"><span class="sixth"></span></div>
                        </div> -->
                        <!-- <div class="progress">
                            <h3>Digital Marketing <span>70%</span></h3>
                            <div class="bar"><span class="fourth"></span></div>
                        </div> -->
                    </div>
                </div>
            </div>
            <!-- My Experience（我的工作经历） -->
            <div class="experience">
                <h3 class="title">我的工作经历</h3>
                <div class="box-container">
                    <div class="box">
                        <span>2021.07 - 2022.07</span>
                        <h3>Web前端工程师</h3>
                        <p>工作内容：</p>
                        <p>1、主要根据UI设计师给的原型图，进行页面的排版，按照实际需求进行页面效果的开发完善；<br />2、与后端人员确定开发接口，数据格式以及配后后端开发人员进行测试；<br />3、进行项目相关维护工作和处理日常项目中出现的bug。
                        </p>
                        <p></p>
                    </div>
                </div>
            </div>
            <!-- My details（技能详情） -->
            <div class="details">
                <h3 class="title">技能详情</h3>
                <div class="box-container">
                    <p>1、熟悉HTML、CSS等web开发技术，可熟练使用flex布局。</p>
                    <p>2、熟练JS的基本语法，对ES6的一些语法：箭头函数、模板字符串、解构等都有一定的了解，并且可以在实际项目中运用。</p>
                    <p>3、熟练sass、less预处理语言编译CSS。</p>
                    <p>4、熟悉JQuery，可配合bootstrap完成响应式布局的网页开发。</p>
                    <p>5、熟悉使用Vue、React框架及相关组件库（element-ui，Ant-design），并能基于脚手架环境进行开发。</p>
                    <p>6、熟练运用ajax、axios调用接口，实现与后端的数据交互。</p>
                    <p>7、掌握简单的mysql语法，可对数据库进行简单的增删改查的操作。</p>
                    <p>8、熟悉微信小程序的开发，可使用Taro框架。</p>
                    <p>9、熟悉Node.js，可运用Node和express框架搭建服务器，</p>
                    <p>10、熟悉git版本控制工具。</p>
                    <p>11、了解webpack和vit构建工具。</p>
                </div>
            </div>
            <!-- My project（项目经历） -->
            <div class="project">
                <h3 class="title">项目经历</h3>
                <div class="box-container">
                    <div class="box">
                        <p>项目名称：<b>校园购（小程序）</b></p>
                        <p>项目技术：微信小程序、Vant Weapp、node.js、mysql</p>
                        <p>项目描述：该项目为校园购管理系统配套的小程序端，用户可以通过该平台进行线上购买商品的服务，因为是校园购物，所以单价会比市场价低一些。</p>
                        <p>个人职责：该项目是我的毕设项目，前后端都是自己完成的，小程序里包括首页、购物车、我的三个模块，实现了商品分类、商品搜索、查看商品、加入购物车等功能。后端是用express脚手架生成服务器，连接数据库。
                        </p>
                    </div>
                    <div class="box">
                        <p>项目名称：<b>美美商城（后台管理系统）</b></p>
                        <p>项目技术：Vue、Vue-router、Vuex、Axios、Element-ui、sass</p>
                        <p>项目描述：该项目是一个电商网站，用户在线上下单，商家配送的模式。</p>
                        <p>个人职责：参与需求文档分析，使用Vue-cli搭建项目环境，采用Element-ui框架开发，负责登录、概况和一些公共部分等模块开发，根据不同的角色登录后台返回相应的路由列表，在beforEach里利用addRoute动态渲染侧边菜单栏，实现菜单权限，并对Axios进行了二次封装，实现请求拦截、从后端服务器获取数据渲染等。
                        </p>
                    </div>
                    <div class="box">
                        <p>项目名称：<b>连锁茶饮（后台管理系统）</b></p>
                        <p>项目技术：React、React-router、React-redux、Ant-design、sass</p>
                        <p>项目描述：该项目是一个专卖茶饮小程序的后台管理端，主要是为产品的上新、下架以及商品信息的修改和活动详情页的修改。</p>
                        <p>个人职责：参与了需求分析。
                        </p>
                    </div>
                    <div class="box">
                        <p>项目名称：<b>连锁茶饮（小程序）</b></p>
                        <p>项目技术：微信小程序、Taro、React、ES6</p>
                        <p>项目描述：该项目是与连锁茶饮后台管理系统配套的小程序端以及用户端，主要是让用户在小程序里下单，商家收到信息进行制作饮品，做好后通知用户拿取饮品，目前只支持线下下单。</p>
                        <p>个人职责：使用Taro等相关框架进行点单、购物车等模块的开发。
                        </p>
                    </div>
                </div>
            </div>
            <!-- My evaluate（自我评价） -->
            <div class="evaluate">
                <h3 class="title">自我评价</h3>
                <div class="box-container">
                    <p>本人性格活泼开朗乐观，与人相处和睦融洽，有较强的沟通能力与团队合作精神。工作认真负责，做事一丝不苟，工作脚踏实地，且好学上进，具有钻研精神，不断提高业务能力。</p>
                </div>
            </div>
            <!-- Contact Info（联系信息） -->
            <div class="contact">
                <h3 class="title">联系信息</h3>
                <div class="box-container">
                    <div class="box">
                        <i class="fas fa-map"></i>
                        <div class="info">
                            <h3>微信</h3>
                            <p>X18323022989</p>
                        </div>
                    </div>
                    <div class="box">
                        <i class="fas fa-phone"></i>
                        <div class="info">
                            <h3>手机号</h3>
                            <p>130-4847-9668(微信同号)</p>
                        </div>
                    </div>
                    <div class="box">
                        <i class="fas fa-envelope"></i>
                        <div class="info">
                            <h3>E-mail</h3>
                            <p>1397756229@qq.com</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>